<template>
  <div class="content-left-wrap">
    <Card>
      <div slot="title">
        <left-top />
      </div>
      <div class="table-wrap">
        <SimpleTable
          :tableColums="tableColums"
          :tableData="tableData"
          :tableLoading="tableLoading"
          :pageSize="getTablePageParams.pageSize"
          :pageNum="getTablePageParams.pageNum"
          @handleRefresh="handleRefresh"
          @handleChangePage="handleChangePage"
          @hanleRowClick="hanleRowClick"
          :keyUp="true"
          :stopKeyUp="stopTableKeyUp"
        />
      </div>
    </Card>
  </div>
</template>
<script>
import { createNamespacedHelpers } from 'vuex'
import SimpleTable from '@/commons/SimpleTable'
import LeftTop from '../LeftTop'
import tableColums from './tableColums'

const { mapActions, mapGetters, mapState } = createNamespacedHelpers('meterReadingOptimize')

export default {
  name: 'meter-reading-optimize-content-left',
  components: {
    SimpleTable,
    LeftTop
  },
  computed: {
    ...mapGetters(['getTablePageParams']),
    ...mapState([
      'tableData',
      'tableLoading',
      'stopTableKeyUp',
      'startTime',
      'endTime',
      'selecteType',
      'currentMeterId',
      'currentGasCls',
      'userQueryParams'
    ]),
    tableColums() {
      return tableColums
    }
  },
  mounted() {
    this.loadTableData()
  },
  methods: {
    ...mapActions([
      'loadTableData',
      'changeTablePageNum',
      'changeCurrentMeterId',
      'lodaMeterDetail',
      'changeStopTableKeyUp',
      'loadQNYQFXData',
      'changeCurrentGasCls',
      'changeUserQueryParams',
      'changeSelectAreaFlag',
      'loadingYqglList'
    ]),
    /**
     * desc: 点击表格重置按钮
     * param {type}
     * return {type} void
     */
    handleRefresh() {
      this.changeCurrentGasCls()
      this.changeUserQueryParams({
        unitId: undefined,
        unitName: undefined
      })
      this.changeTablePageNum(1)
      this.loadTableData()
    },
    /**
     * desc: 点击表格分页
     * param {type}
     * return {type} void
     */
    handleChangePage(num) {
      this.changeTablePageNum(num)
      this.loadTableData({
        meterGasClass: this.currentGasCls,
        ...this.userQueryParams
      })
    },
    /**
     * desc: 表格行点击
     * param {type}
     * return {type} void
     */
    hanleRowClick(row = {}, index) {
      this.changeSelectAreaFlag(false)
      const { meterId } = row
      if (this.currentMeterId !== meterId) {
        this.changeCurrentMeterId(meterId)
        this.lodaMeterDetail()
        this.changeStopTableKeyUp(false)
        this.loadingYqglList({
          meterId
        })
      }
    }
  }
}
</script>
<style lang="less" scoped>
.content-left-wrap {
  width: 100%;
  height: 100%;

  .table-wrap {
    position: relative;
    width: 100%;
    height: 100%;
  }
}
</style>
